{% block sw_order_state_history_card %}
<mt-card
    :title="title"
    :is-loading="isLoading || statesLoading"
    class="sw-order-state-card"
    position-identifier="sw-order-state-history-card"
>
    {% block sw_order_state_change_card_modal %}
    <sw-order-state-change-modal
        v-if="showModal"
        :order="order"
        :is-loading="isLoading"
        :technical-name="technicalName"
        @page-leave="onLeaveModalClose"
        @page-leave-confirm="onLeaveModalConfirm"
    />
    {% endblock %}
    {% block sw_order_state_history_card_container %}
    <sw-container
        columns="repeat(auto-fit, minmax(250px, 1fr))"
        gap="30px 30px"
    >
        {% block sw_order_state_history_card_transaction %}
        <sw-order-state-history-card-entry
            v-if="transaction"
            v-tooltip="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('order.editor'),
                showOnDisabledElements: true
            }"
            class="sw-order-state-history-card__payment-state"
            :disabled="!acl.can('order.editor') || undefined"
            :history="transactionHistory"
            :transition-options="transactionOptions"
            state-machine-name="order_transaction.state"
            :title="$tc('sw-order.stateCard.headlineTransactionState')"
            @state-select="onTransactionStateSelected"
        />

        <template v-else>
            <div>
                <h2>{{ $tc('sw-order.stateCard.headlineTransactionState') }}</h2>
                {{ $tc('sw-order.stateCard.labelNoTransactionState') }}
            </div>
        </template>
        {% endblock %}

        {% block sw_order_state_history_card_delivery %}
        <sw-order-state-history-card-entry
            v-if="delivery"
            v-tooltip="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('order.editor'),
                showOnDisabledElements: true
            }"
            class="sw-order-state-history-card__delivery-state"
            :history="deliveryHistory"
            :disabled="!acl.can('order.editor') || undefined"
            :transition-options="deliveryOptions"
            state-machine-name="order_delivery.state"
            :title="$tc('sw-order.stateCard.headlineDeliveryState')"
            @state-select="onDeliveryStateSelected"
        />

        <template v-else>
            <div>
                <h2>{{ $tc('sw-order.stateCard.headlineDeliveryState') }}</h2>
                {{ $tc('sw-order.stateCard.labelNoDeliveryState') }}
            </div>
        </template>
        {% endblock %}

        {% block sw_order_state_history_card_order%}
        <sw-order-state-history-card-entry
            v-tooltip="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('order.editor'),
                showOnDisabledElements: true
            }"
            class="sw-order-state-history-card__order-state"
            :history="orderHistory"
            :disabled="!acl.can('order.editor') || undefined"
            :transition-options="orderOptions"
            state-machine-name="order.state"
            :title="$tc('sw-order.stateCard.headlineOrderState')"
            @state-select="onOrderStateSelected"
        />
        {% endblock %}
    </sw-container>
    {% endblock %}
</mt-card>
{% endblock %}
